<template>
  <div id="app">
    <div v-if="$route.path != '/login'" style="height: 100%">
      <Header />
      <div class="container">
        <NavMenu />
        <div class="itemcontainer">
          <Breadcrumb />
          <div class="routerview"><router-view></router-view></div>
        </div>
      </div>
    </div>
    <div v-else><router-view></router-view></div>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import NavMenu from "@/components/NavMenu.vue";
import Breadcrumb from "@/components/Breadcrumb.vue";

export default {
  name: "App",
  components: {
    NavMenu,
    Header,
    Breadcrumb,
  },
};
</script>
<style lang="less">
html,
body {
  height: 100%;
  padding: 0px;
  margin: 0px;
  overflow-x: hidden !important;
}
p {
  margin: auto;
}
#app {
  height: 100%;
}
.container {
  display: flex;
  height: calc(100% - 48px);
  .itemcontainer {
    // width: calc(100% - 230px);
    flex: 1;
    height: 100%;
  }
}
.routerview {
  background-color: #e9eef3;
  padding: 20px;
  height: calc(100% - 96px);
  .el-container:nth-child(1) {
    background-color: white;
    height: 100%;
  }
}
.elheader {
  .el-form {
    display: flex;
  }
  .el-form-item,
  .el-button {
    margin: 12px 10px 12px 0;
  }
  .el-form-item > div {
    width: 210px;
  }
}
.flexend {
  display: flex;
  justify-content: flex-end;
}
</style>


<style>
/* 滚动条 */
/*滚动条 start*/
::-webkit-scrollbar {
  width: 7px;
  height: 4px;
  background-color: #f5f5f5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px #e9eef3;
  background: #fff;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  -webkit-box-shadow: inset 0 0 6px rgba(233, 238, 243, 0.3);
  background-color: rgba(233, 238, 243, 0.5);
}
::-webkit-scrollbar-thumb:hover {
  border-radius: 3px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: rgba(233, 238, 243, 0.7);
}
</style>
